﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>SidebarAccordionMenu</title>
    <style type="text/css">        
        body{background:#2C2C2C;margin:0px;top:0px;left:0px;font-family:Calibri,Microsoft Sans-Serif Serif,Tahoma;font-style:normal;font-weight:normal;font-size:12px;color:#171717;}
        .template{background:#E8E8E8;min-width:900px;width:90%;min-height:450px;height:auto;border:1px dotted #A4A2A2;margin-top:2%;padding-bottom:25px;margin-left:5%;}
        .template .titleTemp{color:#E04E06;font-size:16px;font-weight:bold;text-align:left;margin-top:2.5%;min-width:550px;width:95%;margin-left:2.5%;}
        .template .sample{background:#FFFFFF;min-width:850px;width:95%;min-height:575px;border:1px dotted #A4A2A2;padding-bottom:25px;margin-left:2.5%;}
        .template .content{background:#FFFFFF;min-width:550px;width:95%;margin-top:2.5%;min-height:50px;border:1px dotted #A4A2A2;padding-bottom:25px;margin-left:2.5%;}        
    </style>

    <link rel="stylesheet" type="text/css" href="../Styles/IndustrialDashboard.css" />
    <link href="../Widgets/IndustrialSidebarMenu/Styles/IndustrialSidebarMenuDefault.css" rel="stylesheet" type="text/css" />

    <script src="../Widgets/FX/Scripts/FX.js" type="text/javascript"></script>
    <script src="../Scripts/IndustrialDashboard.js" type="text/javascript"></script>
    <script src="../Widgets/IndustrialSidebarMenu/Scripts/IndustrialSidebarMenu.js" type="text/javascript"></script>   
    
     <style type="text/css">
        body{background:#909090; top:0px; left:0px; margin:0px;}
        div.style {width:250px;height:22px;margin-left:305px;margin-top:25px;font-family:Calibri,Microsoft Sans Serif;font-size:12px;position:absolute;}
        .style p {color:#303030;width:95px;float:left;margin-top:4px;}
        .style select{float:left;margin-left:5px;width:120px;font-size:12px;font-family:Calibri,Microsoft Sand Serif;}
        .menuContainer{margin-top:25px;height:auto; width:90%; padding:10px;}      
    </style>    
</head>
<body style="">     
    <script language="javascript" type="text/javascript">
        attachDomReadyEventHandler(function () {
            //Set Initial Options, using "CallProcedure" method.
            var options = { 'URL': '../DALService.svc/CallProcedure', 'DatabaseParameters': { 'Procedure': 'dbo.spGetSidebarMenuData' }
                            , 'Duration': 250, 'MenuOptions':true };
            //Create an Instance of TabularReport
            var sm = new IndustrialSidebarMenu(document.getElementById('pSM'), options);
            //Refresh Widget
            sm.RefreshData();
        });

        function changeStyle(el) {
            try {
                var index = el.selectedIndex;
                var styleObject = getElementByHREFName('Styles/IndustrialSidebarMenu', document);
                var l = window.location;
                if (styleObject) {
                    styleObject.href = l.protocol + '//' + l.host + "/IndustrialDashboard/Widgets/IndustrialSidebarMenu/Styles/" + el[index].value;
                }
            } catch (Error) { }
        }     
    </script>    
    <div class="template">
            <div class="titleTemp">Sample</div>
            <div class="sample">                    
                <div id="pSM" style="position:absolute;margin-left:50px;margin-top:25px;"></div>                
                <div class="style">
                    <p>Change Style:</p> 
                    <select onchange="changeStyle(this);">                        
                        <option value="IndustrialSidebarMenuDefault.css">Default</option>
                        <option value="IndustrialSidebarMenu.css">Standard</option>
                        <option value="IndustrialSidebarMenuHC.css">High-Contrast</option>
                    </select>
                </div>
            </div>
            <div class="content" style='text-align:left;padding:20px;width:92%;'>
                    <p> In this example, the javascript code needed to invoke the stored procedure <i>dbo.spGetSidebarMenuData</i> is:  </p>
                    <pre style='background-color:#E0E0F0;width:98%;'>                    
                        attachDomReadyEventHandler(function() {                            
                            //Set Initial Options, using "CallProcedure" method.
                            var options = { 'URL': '../DALService.svc/CallProcedure', 'DatabaseParameters': { 'Procedure':  <span style='color:red '>'dbo.spGetSidebarMenuData'</span> }
                                            , 'Duration': 250, 'MenuOptions':true };
                            //Create an Instance of TabularReport
                            var sm = new IndustrialSidebarMenu(document.getElementById('pSM'), options);
                            //Refresh Widget
                            sm.RefreshData();
                        });

                        
                    </pre>
                </div>
    </div>  
</body>
</html>